<!-- 盒子组件 -->
<template>
  <div class="box-container">
    <header
      v-if="title || $slots.headerBtns"
      class="title pl-4 relative h-[44px] flex items-center"
    >
      <div v-if="title" class="flex gap-2 items-center">
        <img src="@/assets/images/box-icon.png" style="width: 20px; height: 20px" />
        {{ title }}
      </div>
      <div class="flex-1 h-full text-sm">
        <slot name="headerBtns"></slot>
      </div>
    </header>
    <div style="background-color: rgba(160, 175, 196, 0.2); width: 100%; height: 1px"></div>
    <footer
      ref="footer"
      class="w-full px-4 pt-3 pb-2"
      style="height: calc(100% - 45px); overflow-y: auto"
    >
      <slot></slot>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: ''
  }
})
const footer = ref()
const emits = defineEmits(['footer-height'])
onMounted(() => {
  // setTimeout(() => {
  emits('footer-height', footer.value.offsetHeight)
  // }, 1000)
})
</script>

<style lang="less" scoped>
.box-container {
  // background: linear-gradient(0deg, #ffffff, #ffffff, #ffffff, #e8f0fa);
  background: linear-gradient(0deg, #ffffff, #e8f0fa);

  border: 1px solid #e6ebf1;
  box-shadow: 0px 2px 3px 0px rgba(184, 184, 184, 0.45);

  .title {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #393940;
    line-height: 40px;

    .blue-line {
      position: absolute;
      width: 32px;
      height: 6px;
      background: #4974f7;
      border-radius: 3px;
    }
  }
}
</style>
